<template>
    <div class="person">
        <ul>
            <!-- 
                    v-for语法,就跟JS中for in遍历差不多,in前面跟得是形参,后面跟的是我们的需要遍历的数据
                    
                    v-for中必须要+key来为他分配一个专属标识符,否则,在我们的项目大型交换中,不用的划,会直接为12356567的索引,很可能会导致我们的数据紊乱
             -->
            <li v-for="item in list" :key="item.id">{{ item.name }} =={{ item.age }}</li>
        </ul>
    </div>
</template>

<script lang="ts" setup name='Person'>
import { ref } from 'vue';
import { type PersonInter, type Persons } from '@/types';



// 第一种写法：仅接收
// const props = defineProps(['list'])
/* 
    第一种写法的意思是,只接受来自父组件的中的list

    第二种的意思是,接受list并且是Persons规范

    第三种意思是
        接受list的Person规范,如果有就接受,没有也能继续运行.并且给予一个默认值list:函数值()=>{}直接返回
*/

// 第二种写法：接收+限制类型
// defineProps<{list:Persons}>()

// 第三种写法：接收+限制类型+指定默认值+限制必要性


/* 
    
*/
withDefaults(defineProps<{ list?: Persons }>(), {
    list: () => [{ id: "sdsadasdsadas", name: "GSDSADASDS", age: 111111 }]
})
</script>
<style scoped>
/*  组件的样式 */
.person {
    /* 设置颜色,设置阴影,
            设置元素的外边框圆角,使用一个半径可以确定一个圆形,当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。
            设置内边距
            */
    background-color: aqua;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>
